<template>
  <div class="cart">
    <van-nav-bar title="购物车" :left-text="isEit?'编辑':'完成'" @click-left="isEit=!isEit" />
    <div class="scroll">
      <div class="cart_ct" v-if="token && goods.length">
        <van-swipe-cell v-for="(item, index) in goods" :key="index">
          <van-checkbox v-model="item.ischeck" @change="checkOne"></van-checkbox>
          <van-card :thumb="item.url">
            <template #tags>
              <section>
                <h6>{{ item.name }}</h6>
                <p>{{ item.checkName.join("") }}</p>
                <div>
                  <b style="color: red">￥{{ item.price }}</b>
                  <van-stepper v-model="item.buyNum" />
                </div>
              </section>
            </template>
          </van-card>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="$store.commit('del',index)"/>
          </template>
        </van-swipe-cell>
      </div>
      <img v-else class="imgNo" src="../../assets/img/dp.png" alt="" />
      <my-like></my-like>
    </div>
    <van-submit-bar :price="allPrice" :button-text="isEit?'提交订单':'删除所选'" @submit="onSubmit">
      <van-checkbox v-model="checked" @click="checkFtn">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script>
// reduce 循环累加的
// let arr = [10,20,30,40,50];
// let sum = arr.reduce((prev,now) => {
//   console.log(prev);
//   console.log(now);
//  return prev+now
// },100)
// console.log(sum); // -> 150;
import { Notify } from 'vant';
import myLike from "../../components/myLike";
import { useStore } from "vuex";
import { computed,reactive,toRefs } from "vue";
import { useRouter } from 'vue-router';
export default {
  components: { myLike },
  setup(props) {
    const { state,commit } = useStore();
    const { push } = useRouter();
    const goods = computed(() => state.goodsList);
    let token = localStorage.getItem("token");
    const data = reactive({
      checked: false, // 是否全选
      // allPrice: computed(() => {
      //   let num = 0;
      //   state.goodsList.forEach(item => {
      //     if (item.ischeck){
      //       num+=item.buyNum*item.price;
      //     }
      //   })
      //   return num*100;
      // })
      allPrice: computed(() => state.goodsList.reduce((prev,now) =>prev + (now.ischeck?now.price*now.buyNum:0),0)*100),
      isEit: true, // 是否是编辑
    });
    const checkFtn = () => { // 全选的函数
      commit('checkAll',data.checked);
    }
    const checkOne = () => { // 单选的事件
      // every 数组的方法 数组中所有的都符合条件，就会返回一个 true 只要有一个不符合条件的 返回 false
       commit('kong');
       data.checked = state.goodsList.every(item => item.ischeck);
    }
    const onSubmit = () => { // 提交订单的函数
       if (data.isEit){
         // some 数组的循环方法 只要有一个符合条件 就会返回true
         let bool = state.goodsList.some(item => item.ischeck);
         if (bool){
           push('/order');
         } else {
           Notify({ type: 'warning', message: '请选择结算数据'});
         }
       } else {
         commit('delect');
         data.checked = false;
       }
    }

    return {
      goods,
      token,
      ...toRefs(data),
      onSubmit,
      checkFtn,
      checkOne
    };
  },
};
</script>

<style lang="scss" scoped>
:deep(.van-nav-bar__text) {
  color: red;
}
.cart {
  .scroll {
    height: calc(100% - 96px);
    overflow: auto;
  }
  .imgNo {
    width: 100%;
  }
  :deep(.van-swipe-cell__wrapper) {
    display: flex;
    background: #f7f8fa;
    margin-top: 10px;
    padding-left: 10px;
    .van-button {
      height: 100%;
    }
    .van-card {
      flex: 1;
    }
    section {
      flex: 1;
      h6 {
        font-size: 14px;
        margin-top: 10px;
      }
      p {
        color: #999;
        margin: 15px 0;
      }
      div {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
.van-submit-bar{
  bottom: 50px;
}
</style>
